import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconDelete, IconPlusCircle, IconEdit } from "@douyinfe/semi-icons";
import { useEffect } from "react";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { Row, Col, Popconfirm } from "antd";

import useHelperStore from "../helper/useHelperStore";
import useAllStores from "../hooks/store/useAllStores";
import useDeleteStore from "../hooks/store/useDeleteStore";

import StoreTree from "../components/store/StoreTree";

const oiType = "合作门店";

const CooperativeStorePage = () => {
    const { windowInnerHeight } = useModel("global");
    const { openAddStoreModal, openEditStoreModal } = useHelperStore();

    const { loading, stores, loadAllStores } = useAllStores(oiType);
    const { deleteStore } = useDeleteStore();

    const state = useReactive({
        loading: false,
        selectStore: {},
        horizontal: false,
    });

    const loadData = async () => {
        loadAllStores(oiType);
    };

    useEffect(() => {
        let selectedStore = stores.find((item) => item.oiUuid === state.selectStore?.oiUuid);
        !selectedStore && stores.length > 0 && (selectedStore = stores[0]);
        state.selectStore = selectedStore || {};
    }, [stores]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={5}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{oiType}列表</span>}
                        headerStyle={{ padding: "7px 12px" }}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconPlusCircle />} onClick={() => openAddStoreModal({ oiType, reloadData: loadData })}></Button>
                                <Button icon={<IconRefresh />} onClick={loadData}></Button>
                            </ButtonGroup>
                        }
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto", textAlign: "center" }}
                    >
                        <List
                            loading={loading}
                            dataSource={stores}
                            renderItem={(item) => (
                                <List.Item
                                    className={`list-item ${state.selectStore?.oiUuid === item?.oiUuid ? "list-item-selected" : ""}`}
                                    style={{ padding: "12px 12px 12px 24px" }}
                                    main={
                                        <div style={{ textAlign: "left", fontSize: 15 }}>
                                            <div>{item?.oiName}</div>
                                            <div style={{ fontSize: 12, color: "#999" }}>{item.ptInfo?.oaName}</div>
                                        </div>
                                    }
                                    onClick={() => (state.selectStore = item)}
                                    extra={
                                        <ButtonGroup className="bnts">
                                            <Button icon={<IconEdit />} onClick={() => openEditStoreModal({ oiType, record: item, reloadData: loadData })} />
                                            <Popconfirm title={`确认要删除该门店信息吗？`} onConfirm={() => deleteStore(item.oiUuid, loadData)}>
                                                <Button icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
                                            </Popconfirm>
                                        </ButtonGroup>
                                    }
                                ></List.Item>
                            )}
                        />
                    </SemiCard>
                </Col>
                <Col span={19}>{state.selectStore?.oiUuid && <StoreTree oiType={oiType} oiUuid={state.selectStore.oiUuid} cardBodyHeight={cardBodyHeight} />}</Col>
            </Row>
        </div>
    );
};

export default CooperativeStorePage;
